<template>
  <div class="container" ref="container">
      <el-container>
        <el-aside :style="'width:'+(isCollapse?34:200)+'px;overflow-x:hidden;'">
          <el-menu :collapse="isCollapse" ref="elmenu" background-color="#293846" text-color="#fff" 
            :style="'height:'+workspaceheight+'px;overflow-x:hidden;'"
              @open="handleOpen" @close="handleClose" :default-active="menuactive" 
              @select="handleMenuSelect"
            >
              <template v-for="(menu,idx) in menuList"  :index="idx+''">
                <el-submenu v-if="!menu.is_leaf" :key="idx" :index="idx+''">
                    <template slot="title">
                        <i v-if="menu.icon" :class="'fa fa-'+menu.icon" style="font-size:20px"></i>
                        <span class="ml10">{{menu.name}}</span>
                    </template>
                    <div  v-for="(item,seq) in menu.submenu"  :key="idx+'-'+seq" class="second-menu-background">
                        <el-submenu v-if="item.submenu && item.submenu.length>0"  :index="idx+'-'+seq" >
                            <template slot="title">{{item.name}}</template>
                            <el-menu-item v-for="(subitem,subseq) in item.submenu" :key="subseq" :index="idx+'-'+seq+'-'+subseq"
                              class="third-menu-background"
                                          @click="addTab(subitem.com_type,subitem.name)">{{subitem.name}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else :index="idx+'-'+seq" @click="addTab(item.com_type,item.name)" class="second-menu-background">
                            <span class="">{{item.name}}</span>
                        </el-menu-item>
                    </div>
                </el-submenu>
                <el-menu-item v-else :index="idx+''" :key="idx" @click="addTab(menu.com_type,menu.name)">
                  <i v-if="menu.icon" :class="'fa fa-'+menu.icon" style="font-size:20px"></i>
                  <el-link type="primary">
                    <span class="ml20">{{menu.name}}</span>
                  </el-link>
                </el-menu-item>
              </template>
          </el-menu>
        </el-aside>
        <el-main class="main-con" style="padding: 0px;">
          <el-tabs v-model="curTabId" size="mini" type="card" closable @tab-remove="removeTab" class="main-tab-pane">
              <el-tab-pane
                      v-for="(item, index) in mainTabS"
                      :key="item.name"
                      :label="item.title"
                      :name="item.name"
                      class="main-tab-pane"
                      >
                  <component :is="item.com_type" :com_name="item.name" :com_idx="index" class="w100" 
                    :ref="'tabEl'+item.name"
                    :initParam.sync="item.initParam"
                    :style="'height:'+(workspaceheight-60)+'px;overflow-y:auto;padding:0px 5px'"></component>
              </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
      <div class="btn-area">
          <el-link type="primary"  @click="openLoginPage" __target="_blank" __href="https://jy.xzsec.com/Search/Deal">东财</el-link>
          <el-popover placement="bottom" trigger="hover" class="ml10">
            <div class="compare-item">
              <el-button type="text" @click="clearComp">清空</el-button>
              <div style="margin-top:5px;" v-for="(item,idx) in compareList" :key="idx">
                <el-tag closable @close="handleCompClose(item)">{{item.code}} {{item.name}}  
                  <i class="el-icon-top" @click="moveCompItem(item,'up')"></i>
                  <i class="el-icon-bottom" @click="moveCompItem(item,'down')"></i>
                </el-tag>
              </div>
            </div>
            <el-button type="text" slot="reference">比对列表({{compareList.length}})</el-button>
          </el-popover>
      </div>
  </div>
</template>

<script>
import dayjs from '~/plugins/day';
import config from '~/config';
import elementui from '~/plugins/element-ui';
import exfnInit from '~/plugins/exfnInit';

var comps= {};
  comps.queryRecord_com = () => import('@/pages/stock/queryRecord.vue');
  comps.watchRecord_com = () => import('@/pages/stock/watchRecord.vue');
  comps.addRecord_com = () => import('@/pages/stock/addRecord.vue');
  comps.specialInfo_com = () => import('@/pages/stock/specialInfo.vue');
  comps.dataPull_com = () => import('@/pages/stock/dataPull.vue');
  comps.dfcfUtil_com = () => import('@/pages/stock/dfcfUtil.vue');
  comps.funTest = () => import('@/pages/stock/funTest.vue');
  // comps.fuyou_com = () => import('@/pages/stock/fuyou.vue');

  comps.realTimeCom = () => import('@/pages/trade/main.vue');
  comps.hisDataCom = () => import('@/pages/trade/hisData.vue');
  comps.popWinCom = () => import('@/pages/trade/popWin.vue');
      
  comps.stockInfoCom = () => import('@/pages/utils/stockInfo.vue');
  comps.watchCom = () => import('@/pages/utils/watchList.vue');
  comps.newListCom = () => import('@/pages/utils/newList.vue');
  comps.newHighListCom = () => import('@/pages/utils/newHighList.vue');
  comps.biggestListCom = () => import('@/pages/utils/biggestList.vue');
  comps.compare_com = () => import('@/pages/utils/compare.vue');
  comps.lhDataCom = () => import('@/pages/utils/lhData.vue');
  comps.gzDataCom = () => import('@/pages/utils/gzData.vue');
  comps.reqProductListCom = () => import('@/pages/amazon/reqProductList.vue');
  comps.softListCom = () => import('@/pages/amazon/softList.vue');

  comps.xmypCom = () => import('@/pages/whistle/xmyp.vue');
  comps.adbCfg = () => import('@/pages/android/cmdCfg.vue');
  comps.adbBatchCfg = () => import('@/pages/android/cmdBatchRun.vue');


  comps.websiteDlCom = () => import('@/pages/funs/websiteDl.vue');
  
  comps.huobiCom = () => import('@/pages/huobi/stockInfo.vue');
  
  comps.contactCom = () => import('@/pages/update.vue');
 export default {
    layout: 'login',
    components: comps,
    data() {
      return {
        isCollapse: false,
        curTabId: '1',
        mainTabS: [],
        tabIndex: 1,
        compareList: [],
        menuactive: "",
        flag : 0,
        menuList:[
            {
              name: "个股查询",is_leaf: true, com_type: "stockInfoCom",is_open:false,icon:"scribd",
            },
            {
              name: "火币行情",is_leaf: true, com_type: "huobiCom",is_open:false,icon:"scribd",
            },
            {
              name: "数据比对",is_leaf: true, com_type: "compare_com",is_open:false,icon:"venus-double",
            },
            {
              name: "数据采集",is_leaf: false,is_open:false,icon:"cubes",
              submenu:[
                  { name: "追踪列表",is_leaf: true, com_type: "watchCom" },
                  {
                    name: "新股列表",is_leaf: true, com_type: "newListCom",is_open:true,icon:"free-code-camp",
                  },
                  {
                    name: "新高列表",is_leaf: true, com_type: "newHighListCom",is_open:true,icon:"rocket",
                  },
                  {
                    name: "市值列表",is_leaf: true, com_type: "biggestListCom",is_open:true,icon:"bank",
                  },
                  { name: "龙虎榜数据",is_leaf: true, com_type: "lhDataCom" },
                  { name: "北向买入数据",is_leaf: true, com_type: "gzDataCom" },
              ]
            },
            {
              name: "浮窗预览",is_leaf: true, com_type: "popWinCom",is_open:true,icon:"skyatlas",
            },
            {
              name: "交易统计",is_leaf: true, com_type: "hisDataCom",is_open:true,icon:"history",
            },
            {
              name: "软件交流/更新",is_leaf: true, com_type: "contactCom",is_open:true,icon:"cloud-download",
            },
            {
              name: "挂机工具",is_leaf: false,is_open:false,icon:"star-half-o",
              submenu:[
                  {
                    name: "挂机脚本配置",is_leaf: true, com_type: "adbCfg",is_open:true,
                  },
                  {
                    name: "批量挂机",is_leaf: true, com_type: "adbBatchCfg",is_open:true,
                  }
              ]
            },
            {
              name: "亚马逊",is_leaf: false,is_open:false,icon:"amazon",
              submenu:[
                  {
                    name: "获取品类数据",is_leaf: true, com_type: "reqProductListCom",is_open:true,
                  },
                  {
                    name: "软著信息查询",is_leaf: true, com_type: "softListCom",is_open:true,
                  }
              ]
            },
            {
              name: "工具集",is_leaf: false,is_open:false,icon:"legal",
              submenu:[
                  {
                    name: "整站下载",is_leaf: true, com_type: "websiteDlCom",is_open:true,
                  }
              ]
            },

            // {
            //   name: "实时数据",is_leaf: true, com_type: "realTimeCom",is_open:false,icon:"eye",
            // },
            // {
            //   name: "关注列表",is_leaf: true, com_type: "watchRecord_com",is_open:false,icon:"star",
            // },
            // {
            //   name: "数据比对",is_leaf: true, com_type: "compare_com",is_open:false,icon:"line-chart",
            // },
            // {
            //   name: "记录查询",is_leaf: true, com_type: "queryRecord_com",is_open:false,icon:"search",
            // },
            // {
            //   name: "手动添加",is_leaf: true, com_type: "addRecord_com",is_open:false,icon:"plus-square",
            // },
            // {
            //   name: "特殊查询",is_leaf: true, com_type: "specialInfo_com",is_open:false,icon:"signal",
            // },
            // {
            //   name: "数据拉取",is_leaf: true, com_type: "dataPull_com",is_open:false,icon:"retweet",
            // },
            // {
            //   name: "util",is_leaf: true, com_type: "dfcfUtil_com",is_open:false,icon:"line-chart",
            // },
            // {
            //   name: "test",is_leaf: true, com_type: "funTest",is_open:false,icon:"line-chart",
            // },

            
            // {
            //   name: "用户系统",is_leaf: false,is_open:false,icon:"user",
            //   submenu: [
            //     {
            //         name: "用户数据查询",is_leaf: true, com_type: "userinfo_com",is_open:false,
            //     },{
            //         name: "删除账号",is_leaf: true, com_type: "userdel_com",is_open:false,
            //     },{
            //         name: "修改渠道号及设备号",is_leaf: true, com_type: "useredit_com",is_open:false,
            //     },{
            //         name: "测试号管理",is_leaf: true, com_type: "beta_mgr_com",is_open:false,
            //     }
            //   ]
            // }

            
        ],
        workspaceheight: '100%',
      }
    },
    mounted(){
      document.title = '****'
      let $favicon = document.querySelector('link[rel="icon"]');
      if($favicon) $favicon.href="stock.png";
      this.initWebSocket()
      window.$vue=this;
      window.datadict = {};
      window.datamap = {};
      var that = this;
      this.fixHeight();
      var default_active=sessionStorage.getItem("default-stock-active-menu");
      if(default_active){
          this.menuactive = default_active;
      }
      var complist=sessionStorage.getItem("complist");
      if(complist){
          this.compareList = JSON.parse(complist);
      }

      var activity_page = sessionStorage.getItem("default-stock-active-page");
      var activity_pagename = sessionStorage.getItem("default-stock-active-pagename");
      if(activity_page && activity_pagename){
        setTimeout(() => {
          that.addTab(activity_page,activity_pagename);
        }, 1000);
      }else{
        
      }

      // that.addTab("hisDataCom","历史数据");
      // if(localStorage.getItem("loadUtil")){
      //   this.addUtilComp();
      // }
    },
    computed:{
    },
    provide () {
      return {
        addTab: ()=>{},
        setCalcText: ()=>{},
        qryUserInfo: ()=>{},
        getCompareList:()=>{
          return this.compareList;
        },
        cfg: {},
        isQry:()=>{} ,
        getSleepTime:()=>{ },
        isMoneyException: ()=>{ },
        addException: ()=>{ },
        sendWsMsg: this.sendWsMsg,
      }
    },
    methods: {
      sendWsMsg(msg,cb){
        var message = JSON.stringify(msg);
        this.cbinfo = this.cbinfo || {};
        msg.rndId = msg.rndId|| "";
        this.cbinfo[msg.code+msg.rndId] = {
          code: msg.code,
          rndId: msg.rndId,
          cb: cb
        };
        // setTimeout(()=>{
        //   delete this.cbinfo[msg.code+msg.rndId]
        // },10*60*1000)
        // this.cbinfo = {
        //   code: msg.code,
        //   cb: cb
        // };
        this.ws.send(message);
      },
      initWebSocket(){
        var that = this;
        if(window.WebSocket){
          var ws = new WebSocket('ws://localhost:19999');
          that.ws = ws;
          ws.onopen = function(e){
              console.log("连接服务器成功");
              var msg={code:"init"}
              var cb = (data)=>{
              }
              that.sendWsMsg(msg,cb);
          }
          ws.onclose = function(e){
              console.log("服务器关闭");
          }
          ws.onerror = function(){
              console.log("连接出错");
          }

          ws.onmessage = function(e){
            var data = e.data;
            if(typeof(data)=="string"){
              data = JSON.parse(data);
            }else{
            }
            var reqInfo = data.reqInfo;
            var key = reqInfo.code+reqInfo.rndId;
            if(that.cbinfo && that.cbinfo[key]){
              if(that.cbinfo[key].cb){
                that.cbinfo[key].cb(data.data);
              }
            }
            // if(that.cbinfo && that.cbinfo.code==data.code){
            //   if(that.cbinfo.cb){
            //     that.cbinfo.cb(data.data);
            //   }
            // }
          }
      }
      },
      addCompItem(item){
        if(!item.code) return;
        for(var i=0;i<this.compareList.length;i++){
          if(this.compareList[i].code==item.code) return;
        }
        var newitem = {};
        newitem.code = item.code;
        newitem.name = item.name;

        this.compareList.push(newitem);

        sessionStorage.setItem("complist",JSON.stringify(this.compareList))
        this.$message.info(item.name+"已添加到对比列表,列表详见窗口右上角");
      },
      handleCompClose(item){
        if(!item.code) return;
        for(var i=0;i<this.compareList.length;i++){
          if(this.compareList[i].code==item.code){
            this.compareList.splice(i,1);
            break;
          };
        }
        sessionStorage.setItem("complist",JSON.stringify(this.compareList))
      },
      clearComp(){
        this.compareList=[];
        sessionStorage.setItem("complist",JSON.stringify(this.compareList))
      },
      moveCompItem(item,type){
        if(!item.code) return;
        for(var i=0;i<this.compareList.length;i++){
          if(this.compareList[i].code==item.code){
            if(i==0 && type=="up") return;
            else if(i==this.compareList.length-1 && type=="down") return;
            this.compareList.splice(i,1);
            if(type=="up"){
              this.compareList.splice(i-1,0,item);
            }else if(type=="down"){
              this.compareList.splice(i+1,0,item);
            }
            break;
          };
        }
      },
      fixHeight(){
        this.$nextTick(()=>{
          var eletop = this.$refs.container.getBoundingClientRect().top;
          var clientheight = document.documentElement.clientHeight;
          var clientwidth = document.documentElement.clientWidth;
          if(clientwidth<=1024){
            this.isCollapse = true;
            window.isMini = true;
          }
          this.workspaceheight =  clientheight -eletop;
        });
      },
      handleOpen(key, keyPath) {
        if(key.length==1){
            for(var i=0;i<10;i++){
                if(i!=key) this.$refs.elmenu.close(i+"");
            }
        }
      },
      handleMenuSelect(key, keyPath){
        sessionStorage.setItem("default-stock-active-menu", key);
      },
      handleClose(key, keyPath) {
          
      },
      addTab: function (com_type,menu_name,initParam) {
          var menu_item = null;
          for(var i=0;i<this.mainTabS.length;i++){
            var item = this.mainTabS[i];
            if(item.com_type==com_type){
              this.curTabId = item.name;
              try {
                var el = this.$refs['tabEl'+item.name][0];
                el.setInitParam(initParam);
              }catch(e){

              }
              return;
            }
          }
          for(var i=0;i<this.menuList.length;i++){
              var item=this.menuList[i];
              if(!com_type) return;
              if(com_type){
                  if(item.com_type==com_type){
                      menu_item = item;
                  }
              }
              if(item.submenu){
                  for(var j=0;j<item.submenu.length;j++){
                      var subitem=item.submenu[j];
                      if(com_type){
                          if(subitem.com_type==com_type){
                              menu_item = subitem;
                          }
                      }
                      if(subitem.submenu){
                          for(var k=0;k<subitem.submenu.length;k++){
                              var detailitem=subitem.submenu[k];
                              if(com_type){
                                  if(detailitem.com_type==com_type){
                                      menu_item = detailitem;
                                  }
                              }
                          }
                      }
                  }
              }
          }
          if(!menu_item) return;
          sessionStorage.setItem("default-stock-active-page", com_type);
          sessionStorage.setItem("default-stock-active-pagename", menu_name);
          var newTabName = ++this.tabIndex + '';
          this.mainTabS.push({
              title: menu_name,
              name: newTabName,
              com_type: com_type,
              initParam : initParam,
          });
          this.curTabId = newTabName;
      },
      removeTab: function (targetName) {
          var tabs = this.mainTabS;
          var activeName = this.curTabId;
          if (activeName === targetName) {
              tabs.forEach(function(tab, index) {
                  if (tab.name === targetName) {
                      var nextTab = tabs[index + 1] || tabs[index - 1];
                      if (nextTab) {
                          activeName = nextTab.name;
                      }
                  }
              });
          }
          this.curTabId = activeName;
          this.mainTabS = tabs.filter(function(tab){ return tab.name !== targetName});
      },
      openLoginPage(){
          
          electron.ipcRenderer.send("showDFCF")

          // window.open("https://jy.xzsec.com/Search/Deal");

          // window.open("https://jy.xzsec.com/Login");
      },
    }
  }
</script>

<style lang="less" >
  /* 解决element-ui的table表格控件表头与内容列不对齐问题 */
  .el-table th.gutter{
    display: table-cell!important;
  }
  .el-submenu__title > .fa{
    width: 20px;
  }
  .main > .container{
    width:100%;
  }
  

  .main-con{
    padding: 0px;
    width:calc(100% - 220px); 
    // min-width: 550px;
  }
  @media screen and (max-width: 1024px) {
    .main-con{
      width:calc(100% - 34px); 
      // min-width: 550px;
    }
    .el-menu{
      > .el-menu-item{
        padding-left: 7px !important;
      }
      .el-submenu{
        > .el-submenu__title{
          padding-left: 7px !important;
        }
      }
    }

  }
  .el-menu{
    .el-menu-item i,.el-submenu__title i{
      display: inline-block;
      width: 20px;
      text-align: center;
    }
  }

  .second-menu-background{
     background: rgb(55, 65, 75) !important;
     li{
       div.el-submenu__title{
         background:rgb(55, 65, 75) !important;
       }
     }
  }
  .third-menu-background{
     background:rgb(67, 75, 82) !important;
  }
  .el-menu-item.is-active{
    background-color: #F6BF69 !important;
  }

  .btn-area{
    position: fixed;
    top: 0px;
    right: 20px;
  }

</style>